<template>
<!-- 编辑菜单管理 -->
    <div>
        <public-editor :el_title="title">
            <template slot="buttonEditor">
                <el-button style="float: right;" ><router-link :to="{path:'/menu/management'}">返回</router-link></el-button>
            </template>
            <template slot="editorContent">
                <el-form label-position="left"  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm edit-from">
                    <div class="editorContent">
                        <el-form-item label="菜单编号" prop="orderNum">
                            <el-input v-model="ruleForm.orderNum" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单父级编号" prop="parentId">
                            <el-select v-model="ruleForm.parentId" placeholder="请选择菜单父级编号" style="width:40%" @focus="parent_menu">
                                <el-option v-for="(item,index) in parentIdoption" :key="index" :label="item.name"  :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="菜单名称" prop="name">
                            <el-input v-model="ruleForm.name" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单类型" prop="type">
                            <el-select v-model="ruleForm.type" placeholder="请选择菜单父级编号" style="width:40%">
                                <el-option v-for="(item,index) in typeArryoption" :key="index" :label="item.label"  :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="菜单描述" prop="description">
                            <el-input v-model="ruleForm.description" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单路径" prop="href">
                            <el-input v-model="ruleForm.href" style="width:40%"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="菜单图标" prop="icon" ref="iconElement">
                             <publi-upload :el_action="action"  :el_icon="icon"  @el_getlogoUrl="getlogoUrl"  />
                        </el-form-item>  -->
                        <el-form-item>
                            <el-button type="primary" @click="handleAdd('ruleForm')">提交</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </template>
        </public-editor>
    </div>
</template>
<script>
import publicEditor from "manage-sys-libs/src/components/managePublicEditor/index.vue"
// import publiUpload from "@/components/06_public_upload/index.vue"
import {typeOption} from "@/utils/constArray"
export default {
    components:{
        publicEditor,
        // publiUpload
    },
    data(){
        var checkicon = (rule, value, callback) => {
            if (this.ruleForm.icon == "" || this.ruleForm.icon == null) {
            return callback(new Error('请选择上传菜单图标'));
            }else{
            callback();
            }
        };
        return{
            title:"添加菜单",
            // 所在城市
            ruleForm: {
                orderNum:"",
                parentId:"",
                name:"",
                type:"",
                icon:"",
                description:"",
                href:""
            },
            rules: {
                orderNum: [
                    { required: true, message: '请输入菜单编码', trigger: 'blur' },
                ],
                parentId: [
                    { required: true, message: '请选择菜单父级编号', trigger: 'change' },
                ],
                name: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请输入菜单类型', trigger: 'blur' },
                ],
                description: [
                    { required: true, message: '请输入菜单描述', trigger: 'blur' },
                ],
                href: [
                    { required: true, message: '请输入菜单路径', trigger: 'blur' },
                ],
                // icon: [
                //     { required: true,   validator: checkicon, trigger: 'change' },
                // ],
                
            },
            addorupdate:true,  
            parentIdoption:[], 
            // 图片上传
            action:`${process.env.VUE_APP_BASE_API}config-server/common/img/upload`,
            icon:""             
        };
    },
    computed:{
        typeArryoption(){
            return typeOption
        }
    },
    created(){
        if(this.$route.query && this.$route.query.type === "edit"){
            let data = this.$store.getters.menuListItem;
            if(data){
                this.ruleForm = data;
                this.title = "编辑菜单";
                this.addorupdate = false;
                // 处理图片
                // this.icon = this.ruleForm.logoUrl;
            }else{
                this.title = "添加菜单";
                this.addorupdate = true;
            }
        }
    },
    methods: {
        // 提交
        handleAdd(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.addorupdate){
                        // 添加
                        this.$store.dispatch("menu_page/add_menuAddObj",this.ruleForm)
                        .then(res=>{
                            if(res){
                                this.$router.push({path:'/menu/management'})
                            };
                        })
                    }else{
                        // 编辑
                        this.$store.dispatch("menu_page/update_menuAddObj",this.ruleForm)
                        .then(res=>{
                            if(res){
                                this.$router.push({path:'/menu/management'})
                            };
                        })
                    } 
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }, 
        // 获取所有菜单
        parent_menu(){
            this.$store.dispatch("menu_page/selectparent_menuAddObj").then(res=>{
                this.parentIdoption = res;
            })
        },
        // 获取图片返回得url
        // getlogoUrl(val){
        //     this.ruleForm.icon = val;
        //     this.$refs.iconElement.clearValidate();
        // }
    }
    
}
</script>
<style lang="scss" scope>
.edit-from{
    .firstClass{
        .el-input{
            width: auto;
        }
    }
    
}



</style>